<template>
	<view>
		<view class="page">
			<NavBar :titleObj="titleObj"></NavBar>

			<ScrollView :contentHeight="contentHeight">
				<template #content>
					<view style="margin: 0 10rpx 0 10rpx;">
						<searchBox :showButton="true" @blur="goto"></searchBox>
					</view>
					<view class="banner-box">
						<banner :bannerList="bannerList"></banner>
					</view>
					<!-- <view class="m-t-30">
						<IdentityBox :list="identity" />
					</view> -->
					<view class="m-t-30">
						<NavList :list="menubar" @click="onMenuClick" />
					</view>
					<view class="m-t-30">
						<ServiceBox />
					</view>
					<view class="m-t-30" v-for="(item ,index) in categoryList">
						<NavTitle
							:titleObj="{ title: categoryList[index].name, path:'/pages/accompany-tmp/index/shopService/shopService' }">
						</NavTitle>
						<view v-for="itemSe in serviceList[index].list" v-if="serviceList[index] !== undefined">
							<ServiceItem :dataItem="itemSe" />
						</view>
						<view v-else>
							<ServiceItem :dataItem="{}" />
						</view>

					</view>
					<!-- 	<view class="m-t-30">
						<NavTitle :titleObj="{ title: '打针套餐', path:'/pages/accompany-tmp/index/shopMealList/shopMealList' }"></NavTitle>
						<view class="m-t-20">
							<MealScroll />
						</view>
					</view> -->
					<!-- 	<view class="m-t-30">
						<NavTitle :titleObj="{ title: '置管护理', path:'' }"></NavTitle>
						<ServiceItem />
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '母婴服务', path:'' }"></NavTitle>
						<view class="m-t-30">
							<MealScroll type="service" />
						</view>
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '资讯', path:'' }"></NavTitle>
						<view class="m-t-30">
							<MealScroll type="info" />
						</view>
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '附近商家', path:'/pages/accompany-tmp/index/shopList/shopList' }"></NavTitle>
						<ShopItem />
					</view> -->
				</template>
			</ScrollView>
			<bottom type="accompany" :tabIndex="0"></bottom>
		</view>
	</view>
</template>

<script setup lang="ts">
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js';
	import NavBar from '@/components/accompany/navBar/index.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import searchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import IdentityBox from '@/components/identityBox/index.vue';
	import NavList from '@/components/accompany/tabbar/index/navList/index.vue';
	import ServiceBox from '@/components/accompany/tabbar/index/serviceBox/index.vue';
	import NavTitle from '@/components/accompany/navTitle/navTitle.vue';
	import ServiceItem from '@/components/accompany/serviceItem/index.vue';
	import MealScroll from '@/components/accompany/tabbar/index/mealScroll/index.vue';
	import ShopItem from '@/components/accompany/tabbar/index/shopItem/index.vue';
	import banner from '@/components/house/tabbar/index/banner/banner.vue';
	import { navList } from '@/config/config'
	import bottom from '@/components/footer/footer.vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref, reactive, toRefs, } from 'vue';
	import type { Ref } from 'vue'
	import api from '@/providers/API/api.js'
	import requestHttp from '@/providers/essential/httpService.js'

	const categoryList = ref([]);
	const bannerList = ref([]);
	const serviceList = ref([]);
	const identity = ref([
		{ label: '平台监管' },
		{ label: '认证商户' },
		{ label: '优质服务' },
		{ label: '极速维权' }
	])
	let titleObj = reactive({
		address: ''
	})

	const menubar = ref([]);

	const contentHeight : Ref<number> = ref(0)

	function getcategoryList() {
		let url = api.getcategoryList
		let param = {
		}
		console.log(api.getcategoryList, 'getServiceManage')
		requestHttp.getData(url, param).then((res) => {
			if (res.code == 0) {
				categoryList.value = res.data
				getServiceAll()
			} else if (res.msg) {
				uni.showToast({
					title: res.msg, //显示的文字 
					icon: 'none'
				})
			}

		})
	}

	const getMenus = () => {
		requestHttp.getData(api.getHomeMenus).then((res : any) => {
			if (res.code == 1) {
				menubar.value = res.data;
			}
		});
	}

	const onMenuClick = (item) => {
		if (item?.link_url) {
			uni.navigateTo({ url: item.link_url });
		}
	}

	function goto(e) {
		if (e) {
			uni.navigateTo({
				url: '/pagesA/operate/searchDetails?keyword=' + e
			})
		}
		console.log(e, 'blur')

	}

	let i = 0
	function getServiceAll() {
		console.log(categoryList, 'cate')
		if (i >= categoryList._rawValue.length) {
			return
		}
		let url = api.getServiceList
		let param = {
			pageNo: 1,
			pageSize: 10,
			categoryId: categoryList._rawValue[i].id

		}
		requestHttp.getData(url, param).then((res) => {
			if (res.code == 0) {
				if (res.data.list.length !== 0) {
					let serviceListSuffer = {
						title: categoryList._rawValue[i].name,
						list: res.data.list
					}
					serviceList.value.push(serviceListSuffer)
				}
				i++;
				getServiceAll()
				console.log(serviceList, 'service')
			} else if (res.msg) {
				uni.showToast({
					title: res.msg, //显示的文字 
					icon: 'none'
				})

			}
		})
	}
	onShow(() => {
		console.log('onshow')
		const address = uni.getStorageSync('province')
		if (address) {
			titleObj.address = address
		}
	})
	onLoad(() => {
		console.log('————————————————————————————')
		uni.getLocation({
			success: function (res) {
				const latitude = res.latitude;
				const longitude = res.longitude;

				// 调用地理编码 API 获取地址信息
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/',
					data: {
						location: `${latitude},${longitude}`,
						key: 'PTSBZ-F6DKU-ZC5VB-BMIOA-7EBB6-EXBEH'
					},
					success(res) {
						console.log(res, 'res');
						if (res.data.status === 0) {
							uni.setStorageSync('city', res.data.result.ad_info.city)
							uni.setStorageSync('province', res.data.result.ad_info.province)
							const addressComponent = res.data.result.address_component;
							const road = addressComponent.street;
							titleObj.address = road

						}
					}
				});
			}
		});


		uni.request({
			url: 'https://scrm.caomei.zone/magic/web/app/pz/banner/list',
			method: 'GET',
			success: function (res) {
				var data = res.data;
				if (data.code === 1 && data.data.length > 0) {
					var images = data.data; // 假设接口返回的图片数组保存在变量images中
					for (var i = 0; i < images.length; i++) {
						var picUrl = images[i].pic_url;
						bannerList.value.push(picUrl); // 将picUrl添加到bannerList.value中
					}
					console.log(bannerList.value); // 输出bannerList.value，包含了所有图片URL
				}
			},
			fail: function (err) {
				console.error(err); // 请求失败时的处理
			}
		})
		console.log('onLoad')
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 94
		console.log(contentHeight)
		getcategoryList();
		getMenus();
	})
	// function getAssetsimages (name) {
	// 	return new URL(name, import.meta.url).href
	// }
</script>

<style lang="scss">
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	    background-color: transparent;
	}
	.page {
		padding: 10rpx;
	}

	.banner-box {
		margin-top: 20rpx;
	}

	.looking {
		width: 100%;
		height: mp-sizing(160);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		.left {
			width: 48%;
			height: 100%;

			.item {
				width: 100%;
				height: 100%;
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;

				.title {
					font-weight: 600;
				}

				.text {
					color: $uni-text-color-grey;
				}

				.btn {
					width: mp-sizing(100);
					text-align: center;
					margin: 0;
					background-color: $uni-color-primary;
					padding: mp-sizing(5);
					color: $uni-text-color-inverse;
					font-size: mp-sizing(14);
				}
			}
		}

		.right {
			width: 48%;
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			.item {
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;

				.title {
					font-weight: 600;
				}

				.text {
					color: $uni-text-color-grey;
				}
			}

			.village,
			.map {
				height: 48%;
				width: 100%;
			}
		}
	}
</style>